<template>
  <div class="customers-comprehen">
    <div class="search-content">
      <el-select v-model="searchObj.level" placeholder="请选择统计维度">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select v-model="searchObj.depart_id" placeholder="请选择组合名称">
        <el-option
          v-for="item in groupList"
          :key="item.value"
          :label="item.depart_name"
          :value="item.depart_id"
        ></el-option>
      </el-select>
      <el-date-picker
        v-model="searchObj.month"
        type="month"
        placeholder="选择月份"
        value-format="yyyy-MM"
      ></el-date-picker>
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button type="primary" @click="reset">重置</el-button>
    </div>
    <div class="comprehen-content">
      <el-row :gutter="30">
        <el-col :span="12" :gutter="20">
          <div class="grid-content bg-purple grid-data">
            <div class="data-title">回厂客户数</div>
            <div id="container1" style="width: 100%;height:400px;"></div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light grid-data">
            <div class="data-title">月新增客户数</div>
            <div id="container2" style="width: 100%;height:400px;"></div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <div class="grid-content bg-purple grid-data">
            <div class="data-title">首保、二保客户数</div>
            <div id="container3" style="width: 100%;height:360px;"></div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light grid-data">
            <el-row :gutter="20">
              <el-col :span="8" class>
                <div class="grid-content bg-purple blockInfo">
                  <div class="data-title">预警流失客户再回厂率</div>
                  <div class="return-rate">{{four.percent || 0}}</div>
                  <div class="return-bottom">
                    <p>
                      <span>预警流失客户总数</span>
                      <span>{{four.data_type_all_danger_maintain || 0}}</span>
                    </p>
                    <p>
                      <span>预警流失客户当月再回厂</span>
                      <span>{{four.data_type_danger_maintain || 0}}</span>
                    </p>
                  </div>
                </div>
              </el-col>
              <el-col :span="8" class>
                <div class="grid-content bg-purple-light blockInfo">
                  <div class="data-title">过去一年客户掌握率</div>
                  <div class="rate-line">
                    <div class="rate-bottom">
                      <p
                        class="rate-top"
                        :style="'width:'+ parseFloat(five.data_type_one_twelve_maintain / five.data_type_thirteen_twenty_four_maintain) * 100 + '%'|| 0 "
                      ></p>
                    </div>
                    <p
                      class="rate-number"
                    >{{five.data_type_one_twelve_maintain || 0}}/{{five.data_type_thirteen_twenty_four_maintain || 0}}</p>

                    <p class="rate-info last-tew">
                      <span class="rate-info-legend"></span>
                      <span class="rate-info-name">最近12个月再回厂客户数</span>
                    </p>
                    <p class="rate-info last-tewp">
                      <span class="rate-info-legend"></span>
                      <span class="rate-info-name">13-24回厂客户总数</span>
                    </p>
                  </div>
                  <div class="return-bottom">
                    <p>
                      <span>客户流失率</span>
                      <span>{{five.lose_percent || 0}}</span>
                    </p>
                    <p>
                      <span>再次进场客户</span>
                      <span>{{five.data_type_thirteen_twenty_four_again_maintain || 0}}</span>
                    </p>
                  </div>
                </div>
              </el-col>
              <el-col :span="8" class>
                <div class="grid-content bg-purple blockInfo">
                  <div class="data-title">过去36个月客户掌握率</div>
                  <div id="container4" v-if="pie" style="width: 100%; height: 360px"></div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <hr />
      <p class="attention">注: 以上数据统计结果是在您使用车家佳售后管理系统基础上计算得出</p>
    </div>
  </div>
</template>

<script>
import Highcharts, { time } from "highcharts";
export default {
  data() {
    return {
      value: "",
      value1: "",
      width: "60%",
      four: {},
      five: {},
      searchObj: {
        depart_id: "",
        level: "",
        month: ""
      },
      options: [],
      groupList: [],
      pie: false
    };
  },
  async mounted() {
    var myDate = new Date();
    var tYear = myDate.getFullYear();
    var tMonth = myDate.getMonth();

    var m = tMonth + 1;
    if (m.toString().length == 1) {
      m = "0" + m;
    }
    this.searchObj.month = tYear + "-" + m;
    await this.getLevel();
    // await this.getGroup();
    await this.getCharts();
  },
  watch: {
    "searchObj.level"() {
      this.searchObj.depart_id = "";
      this.getGroup();
    }
  },
  methods: {
    // 重置
    reset() {
      this.searchObj.level = this.options[0].value;
      this.searchObj.depart_id = "";
      this.searchObj.month = "";
      this.getCharts();
    },
    // 搜索
    search() {
      this.getCharts();
    },
    // 获取数据
    getCharts() {
      return this.$http
        .post(
          "/admin/statistics/index.php?act=afterSaleStatistics&op=afterSaleStatistics",
          this.searchObj
        )
        .then(res => {
          let one = res.data.one;
          let two = res.data.two;
          let three = res.data.three;
          let six = res.data.six;

          this.four = res.data.four;
          this.five = res.data.five;

          let that = this;
          var chart = Highcharts.chart("container1", {
            chart: {
              type: "column"
            },
            title: false,
            credits: {
              //去掉水印
              enabled: false
            },
            exporting: {
              enabled: false
            },
            xAxis: {
              categories: one.months
            },
            yAxis: {
              title: {
                text: ""
              }
            },
            plotOptions: {
              column: {
                borderWidth: 0
              }
            },
            series: [
              {
                name: "回厂客户",
                data: this.formatData(one.values, 0),
                color: "#1f62b1"
              },
              {
                name: "回厂保养客户",
                data: this.formatData(one.values, 1),
                color: "#f29469"
              }
            ]
          });

          var chart1 = Highcharts.chart("container2", {
            title: false,
            credits: {
              //去掉水印
              enabled: false
            },
            yAxis: {
              title: {
                text: ""
              }
            },
            xAxis: {
              categories: two.months
            },
            exporting: {
              enabled: false
            },

            legend: {
              layout: "horizontal",
              align: "center",
              verticalAlign: "bottom"
            },
            plotOptions: {
              series: {
                label: {
                  connectorAllowed: false
                }
              }
            },
            series: [
              {
                name: "新增客户回场数",
                data: this.formatData(two.values, 0),
                color: "#1f62b1"
              },
              {
                name: "新增回厂客户保养",
                data: this.formatData(two.values, 1),
                color: "#f29469"
              }
            ],
            responsive: {
              rules: [
                {
                  condition: {
                    maxWidth: 500
                  },
                  chartOptions: {
                    legend: {
                      layout: "horizontal",
                      align: "center",
                      verticalAlign: "bottom"
                    }
                  }
                }
              ]
            }
          });
          var chart2 = Highcharts.chart("container3", {
            chart: {
              type: "area"
            },
            credits: {
              //去掉水印
              enabled: false
            },
            exporting: {
              enabled: false
            },
            title: {
              text: ""
            },
            subtitle: {
              text: ""
            },
            xAxis: {
              categories: three.months
            },
            yAxis: {
              title: {
                text: ""
              },
              labels: {
                formatter: function() {
                  return this.value / 1000;
                }
              }
            },
            tooltip: {
              split: true
            },
            plotOptions: {
              area: {
                stacking: "normal",
                lineColor: "#666666",
                lineWidth: 1,
                marker: {
                  lineWidth: 1,
                  lineColor: "#666666"
                }
              }
            },
            series: [
              {
                name: "首次客户数",
                data: this.formatData(three.values, 0),
                color: "#1f62b1"
              },
              {
                name: "二次客户数",
                data: this.formatData(three.values, 1),
                color: "#00d9cc"
              }
            ]
          });
          if (six.lose_percent && six.remain_percent) {
            this.pie = true;
            var chart3 = Highcharts.chart("container4", {
              chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: "pie"
              },
              title: {
                text: ""
              },
              credits: {
                //去掉水印
                enabled: false
              },
              exporting: {
                enabled: false
              },
              tooltip: {
                pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
              },
              plotOptions: {
                pie: {
                  allowPointSelect: true,
                  cursor: "pointer",
                  dataLabels: {
                    enabled: true,
                    format: "<b>{point.name}</b>: {point.percentage:.1f} %",
                    style: {
                      color:
                        (Highcharts.theme &&
                          Highcharts.theme.contrastTextColor) ||
                        "black"
                    }
                  }
                  // showInLegend: true //控制图例显示
                }
              },
              series: [
                {
                  colorByPoint: true,
                  data: [
                    {
                      name: "流失率",
                      y: parseFloat(six.lose_percent),
                      color: "#1f62b1"
                    },
                    {
                      name: "掌握率",
                      y: parseFloat(six.remain_percent),
                      color: "#f29469"
                    }
                  ]
                }
              ]
            });
          } else {
            this.pie = false;
          }
        });
    },
    formatData(first, index) {
      let data = [];
      first.map(item => {
        if (item[index] || item[index] == 0) {
          data.push(item[index]);
        }
      });
      return data;
    },
    // 获取维度
    getLevel() {
      return this.$http
        .post("/admin/depart/index.php?act=departManage&op=departLevels")
        .then(res => {
          this.options = res.data;
          this.searchObj.level = this.options[0].value;
        });
    },
    // 获取组合
    getGroup() {
      return this.$http
        .post("/admin/depart/index.php?act=departManage&op=departListDown", {
          depart_level: this.searchObj.level
        })
        .then(res => {
          if (res.code == 1) {
            this.groupList = res.data;
          } else {
            this.groupList = [];
          }
        });
    }
  }
};
</script>

<style scoped lang="scss">
.customers-comprehen {
  min-height: 100%;
   min-width: 1678px;
  background-color: rgb(243, 243, 243);
  .comprehen-content {
    padding: 0 10px 10px;
  }
.el-main {
   
   background-color: rgb(243, 243, 243);
}
  .lead-deal {
    height: 440px;
    background-color: #fff;
    margin-bottom: 20px;
    .lead-deal-top {
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      font-weight: normal;
      text-indent: 20px;
      border-bottom: 1px solid rgb(233, 233, 233);
    }
  }
  .data-title {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    font-weight: normal;
    text-indent: 20px;
    border-bottom: 1px solid rgb(233, 233, 233);
  }

  .grid-data {
    background-color: #fff;
    margin-bottom: 20px;
  }
  .attention {
    text-align: center;
    color: #7b7979;
  }
  .blockInfo {
    height: 400px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 1px 1px 5px rgb(233, 233, 233);
  }
  .return-rate {
    min-height: 242px;
    line-height: 242px;
    font-size: 42px;
    color: rgb(31, 98, 177);
    border-bottom: 1px solid rgb(233, 233, 233);
    text-align: center;
  }
  .return-bottom {
    padding: 30px 20px;
    p {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      color: #928e8e;
    }
  }
  .rate-line {
    height: 242px;
    border-bottom: 1px solid rgb(233, 233, 233);
    text-align: center;
    padding: 70px 20px 0;
    box-sizing: border-box;
    .rate-number {
      font-size: 20px;
    }
    .rate-bottom {
      width: 100%;
      height: 20px;
      border-radius: 20px;
      background-color: rgb(185, 185, 185);
      margin-bottom: 10px;
      overflow: hidden;
      .rate-top {
        width: 20%;
        height: 20px;
        border-radius: 20px;
        background-color: rgb(31, 98, 177);
      }
    }
    .rate-info {
      display: flex;
      align-items: center;
      .rate-info-legend {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background-color: rgb(31, 98, 177);
      }
      .rate-info-name {
        flex: 1;
        margin-left: 20px;
        color: rgb(179, 189, 199);
        font-size: 16px;
      }
    }
    .last-tew {
      margin-bottom: 10px;
      margin-top: 20px;
      .rate-info-legend {
        background-color: rgb(31, 98, 177);
      }
    }
    .last-tewp {
      .rate-info-legend {
        background-color: rgb(185, 185, 185);
      }
    }
  }
}
</style>
